
<template>
  <div class="common-layout" style="background: #F1F1F1;">
    <el-container>
      <el-aside width="250px">
      <div style="background:#f9f9f9;width: 248px;height: 58px;border: 1px solid #F1F1F1">
        <img src="src/assets/hy/jurassic.png" width="30" height="30" style="margin: 15px 10px"/>
        <div style=" margin: -42px 45px"> 组织架构</div>
      </div>
        <div style="padding-bottom: 20px">
          <el-input v-model="input" placeholder="Please input" />
        </div>
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
      </el-aside>
      <el-container>
        <el-header>
          <div style="margin-top: 16px">
            <img src="/src/assets/hy/zhiwei.png" height="30" width="30"/>
            <span style="vertical-align: 8px">&nbsp;&nbsp;编制管理</span>
            <div style="float: right;margin:-2px 10px">
              <el-button :icon="Search" circle />
              <el-dropdown style="margin-left: 20px">
                <el-button type="primary">
                 新建<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item><span @click="dialogFormVisible = true">新建职务</span></el-dropdown-item>
                    <el-dropdown-item><span>批量新增</span></el-dropdown-item>
                    <el-dropdown-item><span>导入</span></el-dropdown-item>
                    <el-dropdown-item><span>导出</span></el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          <div>
            <el-dialog v-model="dialogFormVisible" title="职务计划">
              <el-form >
                <el-form-item label="公司：" :label-width="formLabelWidth" style="margin-left: 30px">
                  <el-input autocomplete="off" />
                </el-form-item>
                <el-form-item label="部门：" :label-width="formLabelWidth" style="margin-left: 30px">
                  <el-input  autocomplete="off" />
                </el-form-item>
                <el-form-item label="职务名称：" :label-width="formLabelWidth">
                  <el-input  autocomplete="off" />
                </el-form-item>
                <el-form-item label="编制人数：" :label-width="formLabelWidth">
                  <el-input  autocomplete="off" />
                </el-form-item>
                <el-form-item label="实际人数：" :label-width="formLabelWidth">
                  <el-input  autocomplete="off" />
                </el-form-item>
                <el-form-item label="状态：" :label-width="formLabelWidth" style="margin-left: 30px">
                  <el-select v-model="d.region"  placeholder="">
                    <el-option label="缺编" value="vacancy" />
                    <el-option label="满编" value="full" />
                    <el-option label="超编" value="overstrength" />
                  </el-select>
                </el-form-item>
              </el-form>
              <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">保存</el-button>
      </span>
              </template>
            </el-dialog>
          </div>
        </el-header>
        <el-main>
          <el-row :gutter="20">
            <el-col :span="12" style="margin: -10px 0px"><div class="bianzhi">岗位编制人数<div class="shuzi">100</div></div></el-col>
            <el-col :span="12" style="margin: -10px 0px"><div class="shiji">岗位实际人数<div class="shuzi">340</div> </div></el-col>
          </el-row>
          <el-table
              ref="multipleTableRef"
              :data="tableData"
              style="width: 100%;margin-top: 20px;height: 429px"
              @selection-change="handleSelectionChange"
              stripe
              :header-cell-style="{background:'#f5f7fa'}"
          >
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" label="公司" width="120">
              <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column align="center" property="name" label="部门" width="120"/>
            <el-table-column align="center" property="address" label="职务名称" />
            <el-table-column align="center" property="address" label="编制人数" />
            <el-table-column align="center" property="address" label="实际人数" />
            <el-table-column align="center" property="address" label="状态" />
            <el-table-column align="center" label="操作" >
              <!--按钮需要使用插槽才能取到当前行的值-->
              <template #default ="s" >
                <el-button @click="editBook(s.row)" type="primary" size="small" :circle="true">
                  <el-icon>
                    <Edit />
                  </el-icon>
                </el-button>
                <el-button @click="delBook(s.row.bookId)" type="danger" size="small" :circle="true">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <el-row justify="center">
              <el-col>
                <el-pagination
                    v-model:currentPage="pageNo"
                    v-model:page-size="pageSize"
                    :page-sizes="[5,10, 20, 30, 40]"
                    :small="small"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="100"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
              </el-col>
            </el-row>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import {reactive, ref} from "vue";
import axios from "axios";
const dialogFormVisible = ref(false)
const d = reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
  tableData:[],
  region: '',
});
const getData = (pageNo)=>{
  axios.get("http://localhost:1688/all-books/"+pageNo+"/"+d.pageSize)
      .then((res)=>{
        d.total = res.data.total;
        d.tableData = res.data.rows;
      })
}
const handleSizeChange =(size)=>{
  d.pageSize = size;
  getData(d.pageNo);
}

const handleCurrentChange = (pageNo)=>{
  getData(pageNo);
}
  interface User {
    date: string
    name: string
    address: string
  }
const tableData: User[] = [
  {
    date: '能力有限公司',
    name: 'Tom',
    address: 'No',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No',
  },

]
import {
  Search,
} from '@element-plus/icons-vue'

interface Tree {
  label: string
  children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
  console.log(data)
}

const data: Tree[] = [
  {
    label: '组织架构',
    children: [
      {
        label: '株洲-能力有限公司',
        children: [
          {
            label: '人事部门',
          },
          {
            label: '技术部门',
          },
          {
            label: '财务部门',
          },
          {
            label: '后勤部门',
          },
        ],
      },
    ],
  },
]

const defaultProps = {
  children: 'children',
  label: 'label',
}
const input = ref('')
</script>

<style scoped>
.el-header{
  /*border: 1px solid lightgrey;*/
  background: #F9F9F9;
}
.el-aside{
  /*border: 1px solid black;*/
  background: white;
}
.el-main{
  /*border: 1px solid black;*/
  /*background: skyblue;*/
}
.button{
  border: 0px;
  width: 100px;
  height: 80px;
}
.bianzhi{
  text-align: center;
  height: 80px;
  background:#ffffff;
  line-height: 55px;
  font-size: 15px;
}
.shiji{
  text-align: center;
  height: 80px;
  background: #ffffff;
  line-height: 55px;
  font-size: 15px;
}
.shuzi{
  line-height: 0px;
  font-size: 20px
}
</style>